<script setup lang="ts">
import TileSelf from '@/components/tiles/item/TileSelf.vue'
const props = defineProps({
  tiles:{type: Array<string>, required: false, default:new Array<string>()},
  isHu: {type: Boolean, required: false, default: false},
  versatileTiles: {type: Array<string>, required: false, default: new Array<string>()}
})

// 判断是否百搭牌
function isVersatile(tile:string) {
  return props.versatileTiles.indexOf(tile) >= 0;
}

const emit = defineEmits<{
  (e: 'playTile', tile: string) : void
}>();

function playTile(tile:string) {
  emit('playTile', tile);
}
</script>

<template>
  <div class="self-owned-tiles">
    <TileSelf v-for="(tile, index) in props.tiles" :showTagLeftTop="isVersatile(tile)" :tagLeftTopText="isVersatile(tile) ? '财' :''" @dblclick="playTile(tile)" :key="tile + index" :code="tile" ></TileSelf>
  </div>
</template>

<style scoped lang="scss">
.self-owned-tiles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-left: -150px;
  .tile-item {
    margin-left: 1px;
    &:hover {
      margin-bottom: 20px;
    }
  }
}
</style>
